<template>
  <div style="width: 100%; height: 100%">
    <!-- 执行步骤信息-->
    <el-row>
      <el-col :span="5" style="height: 800px">
        <el-table
          :data="FFieldList"
          border
          :row-class-name="tableRowClassName"
          @row-click="onFieldRowClick"
          height="400"
        >
          <el-table-column prop="FTreeCode" label="节点" width="60">
          </el-table-column>
          <el-table-column prop="FFieldCaption" label="字段标签">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="19">
        <el-row>
          <el-button @click="getFields()">跟据表名获取字段</el-button>
          <el-button @click="appendField()">新增字段</el-button>
          <el-button @click="orderBy()">重新排序</el-button>
          <el-button @click="delField()">删除字段</el-button>
          <el-button @click="upField()">上移字段</el-button>
          <el-button @click="downField()">下移字段</el-button>
          <el-button @click="clearField()">清除字段</el-button>
        </el-row>
        <el-row>
          <template v-if="isShow()">
            <div class="my-block">
              <!-- 模块信息 -->
              <table border="1">
                <colgroup>
                  <col style="width: 16rem; max-width: 16rem" />
                  <col style="width: 32rem" />
                  <col style="width: 16rem; max-width: 16rem" />
                  <col style="width: 32rem" />
                  <col style="width: 16rem; max-width: 16rem" />
                  <col style="width: 32rem" />
                </colgroup>
                <tbody>
                  <tr>
                    <td class="title">
                      <span style="color: red"> * </span>步骤节点
                    </td>
                    <td>
                      <el-input
                        disabled
                        v-model="FIndexData.FTreeCode"
                      ></el-input>
                    </td>
                    <td class="title">
                      <span style="color: red"> * </span>步骤名称
                    </td>
                    <td colspan="3">
                      <el-input
                        disabled
                        v-model="FIndexData.FDataCaption"
                      ></el-input>
                    </td>
                  </tr>
                  <tr>
                    <div style="height: 20px"></div>
                  </tr>
                  <tr>
                    <td class="title">
                      <span style="color: red"> * </span>序号
                    </td>
                    <td>
                      <el-input v-model="FIndexField.FOrderNo"></el-input>
                    </td>
                    <td class="title">
                      <span style="color: red"> * </span>标签
                    </td>
                    <td colspan="3">
                      <el-input v-model="FIndexField.FFieldCaption"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">
                      <span style="color: red"> * </span>字段名称
                    </td>
                    <td>
                      <el-input v-model="FIndexField.FFieldName"></el-input>
                    </td>
                    <td class="title">
                      <span style="color: red"> * </span>Json名称
                    </td>
                    <td>
                      <el-input v-model="FIndexField.FFieldJsonName"></el-input>
                    </td>
                    <td class="title">
                      <span style="color: red"> * </span>数据类型
                    </td>
                    <td>
                      <el-select
                        v-model="FIndexField.FFieldDataType"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in FDataTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                          <span style="float: left">{{ item.label }}</span>
                          <span
                            style="
                              float: right;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            >{{ item.value }}</span
                          >
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">长度</td>
                    <td>
                      <el-input v-model="FIndexField.FFieldSize"></el-input>
                    </td>
                    <td class="title">精度</td>
                    <td>
                      <el-input
                        v-model="FIndexField.FFieldPrecision"
                      ></el-input>
                    </td>
                    <td class="title">数据格式</td>
                    <td>
                      <el-select
                        v-model="FIndexField.FFieldFormat"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in FDataFormat"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                          <span style="float: left">{{ item.label }}</span>
                          <span
                            style="
                              float: right;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            >{{ item.value }}</span
                          >
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">取数据类别</td>
                    <td>
                      <el-select
                        v-model="FIndexField.FFieldDefaultType"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in FFilterValueType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                          <span style="float: left">{{ item.label }}</span>
                          <span
                            style="
                              float: right;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            >{{ item.value }}</span
                          >
                        </el-option>
                      </el-select>
                    </td>
                    <td class="title">取数据值</td>
                    <td>
                      <el-select
                        v-model="FIndexField.FFieldDefaultValue"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in FFieldDefaultValue"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                          <span style="float: left">{{ item.label }}</span>
                          <span
                            style="
                              float: right;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            >{{ item.value }}</span
                          >
                        </el-option>
                      </el-select>
                    </td>
                    <td class="title">自定义值</td>
                    <td>
                      <el-input
                        v-model="FIndexField.FFieldDefaultValue"
                      ></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">必需有值</td>
                    <td align="center">
                      <el-switch v-model="FIndexField.FFieldbValue"></el-switch>
                    </td>
                    <td class="title">为空赋值</td>
                    <td align="center">
                      <el-switch
                        v-model="FIndexField.FSetValueIfEmpty"
                      ></el-switch>
                    </td>
                    <td class="title">自定义数据格式</td>
                    <td>
                      <el-input v-model="FIndexField.FFieldFormat"></el-input>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </template>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {
  constHelper,
  evenDels,
  TModuleDataSet,
  TModuleField,
} from "@/baselib/module/BaseClass";
import { Options, Vue } from "vue-class-component";
//配合着用
@Options({})
export default class TFrmModuleFieldList extends Vue {
  private FFieldDefaultValue: any[] = constHelper.TMyValueDefaultValue;
  private FDataFormat: any[] = constHelper.TMYDataFormat;
  private _FIndexData: TModuleDataSet = new TModuleDataSet();
  public FOnDel?: evenDels;
  public get FIndexData(): TModuleDataSet {
    return this._FIndexData;
  }
  public set FIndexData(qIndexData: TModuleDataSet) {
    this._FIndexData = qIndexData;
    this.FFieldList = this._FIndexData.fieldList;
    if (this.FFieldList.length > 0) {
      this.FIndexField = this.FFieldList[0];
    } else {
      this.FIndexField = new TModuleField();
      this.FIndexField.FFieldCaption = "展示数据无效,请用新增字段";
    }
  }

  private FFieldList: TModuleField[] = []; //执行步骤数
  private FIndexField: TModuleField = new TModuleField(); //当前选中的执行步骤
  private FDataTypeList: any[] = constHelper.TMyDataType;
  private FFilterValueType: any[] = constHelper.TMyValueDefaultType;
  public created() {}
  private isShow(): boolean {
    if (
      !this.$myStrHelper.stringIsEmptyYW(this.FIndexField.FFieldID) ||
      !this.$myStrHelper.stringIsEmptyYW(this.FIndexField.myTempID)
    ) {
      return true;
    }
    return false;
  }
  private onFieldRowClick(row: TModuleField) {
    this.FIndexField = row;
  }
  private tableRowClassName(row: any): string {
    let lTemp = row.row as TModuleField;
    if (!this.$myStrHelper.stringIsEmptyYW(this.FIndexField.FFieldID)) {
      if (lTemp.FFieldID == this.FIndexField.FFieldID) {
        return "success-row";
      }
    }
    if (!this.$myStrHelper.stringIsEmptyYW(this.FIndexField.myTempID)) {
      if (lTemp.myTempID == this.FIndexField.myTempID) {
        return "success-row";
      }
    }

    return "";
  }

  private async getFields() {
    if (this.$myStrHelper.stringIsEmpty(this._FIndexData.FDataTableName)) {
      this.$myMsgHelp.msgDialog("步骤未设置表名，不可一键获取字段");
      return;
    }
    let lResult = await this.$myModuleAPI.GetDataFields(
      this._FIndexData.FDataTableName
    );
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    if (this.FFieldList.length == 0 && lResult.resultData.length > 0) {
      lResult.resultData.forEach((item) => {
        item.myTempID = this.$myStrHelper.getGUID();
        item.FOrderNo = this.FFieldList.length + 1;
        this.FFieldList.push(item);
      });
      this.FIndexField = this.FFieldList[0];
    }
  }
  private appendField() {
    var tempField = new TModuleField();
    tempField.myTempID = this.$myStrHelper.getGUID();
    tempField.FOrderNo = this.FFieldList.length + 1;
    this.FFieldList.push(tempField);
    this.FIndexField = tempField;
  }
  private delField() {
    let tempI = -1;
    for (var i = this.FFieldList.length - 1; i >= 0; i--) {
      var item = this.FFieldList[i];
      if (!this.$myStrHelper.stringIsEmpty(this.FIndexField.FFieldID)) {
        if (item.FFieldID == this.FIndexField.FFieldID) {
          tempI = i;
          this.FFieldList.splice(i, 1);
          if (this.FOnDel != undefined) {
            this.FOnDel(item.FFieldID);
          }
          break;
        }
      } else {
        if (item.myTempID == this.FIndexField.myTempID) {
          tempI = i;
          this.FFieldList.splice(i, 1);
          break;
        }
      }
    }
    if (tempI >= 0) {
      if (this.FFieldList.length == 0) {
        this.FIndexField = new TModuleField();
      } else if (this.FFieldList.length > tempI) {
        this.FIndexField = this.FFieldList[tempI];
      } else {
        this.FIndexField = this.FFieldList[tempI - 1];
      }
    }
  }
  private upField() {
    if (this.FFieldList.length <= 1) {
      return;
    }
    if (this.FIndexField == undefined) {
      return;
    }
    var tempIndex = -1;
    for (var i = this.FFieldList.length - 1; i >= 0; i--) {
      var item = this.FFieldList[i];
      if (!this.$myStrHelper.stringIsEmpty(this.FIndexField.FFieldID)) {
        if (item.FFieldID == this.FIndexField.FFieldID) {
          tempIndex = i;
          break;
        }
      } else {
        if (item.myTempID == this.FIndexField.myTempID) {
          tempIndex = i;
          break;
        }
      }
    }
    if (tempIndex > 0) {
      var lUp = this.FFieldList[tempIndex - 1];
      var lNow = this.FFieldList[tempIndex];
      var lUpOrder = lUp.FOrderNo;
      lUp.FOrderNo = lNow.FOrderNo;
      lNow.FOrderNo = lUpOrder;
      this.FFieldList[tempIndex - 1] = lNow;
      this.FFieldList[tempIndex] = lUp;
    }
  }
  private downField() {
    if (this.FFieldList.length <= 1) {
      return;
    }
    if (this.FIndexField == undefined) {
      return;
    }
    var tempIndex = -1;
    for (var i = this.FFieldList.length - 1; i >= 0; i--) {
      var item = this.FFieldList[i];
      if (!this.$myStrHelper.stringIsEmpty(this.FIndexField.FFieldID)) {
        if (item.FFieldID == this.FIndexField.FFieldID) {
          tempIndex = i;
          break;
        }
      } else {
        if (item.myTempID == this.FIndexField.myTempID) {
          tempIndex = i;
          break;
        }
      }
    }
    if (tempIndex < this.FFieldList.length - 1) {
      var lUp = this.FFieldList[tempIndex + 1];
      var lNow = this.FFieldList[tempIndex];
      var lUpOrder = lUp.FOrderNo;
      lUp.FOrderNo = lNow.FOrderNo;
      lNow.FOrderNo = lUpOrder;
      this.FFieldList[tempIndex + 1] = lNow;
      this.FFieldList[tempIndex] = lUp;
    }
  }
  private clearField() {
    for (var i = this.FFieldList.length - 1; i >= 0; i--) {
      if (this.FOnDel != undefined) {
        this.FOnDel(this.FFieldList[i].FFieldID);
      }
      this.FFieldList.splice(i, 1);
    }
    //this.FIndexField = undefined;
  }
  private orderBy() {
    if (this.FFieldList.length <= 1) {
      return;
    }
    this.FFieldList.forEach((item, index) => {
      item.FOrderNo = index + 1;
    });
  }
}
</script>



<style>
table {
  border-collapse: collapse;
}

table,
table tr td {
  border: 1px solid #ccc;
}

.title {
  background-color: #d9d9d9;
  padding-left: 10px;
}
</style>